<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<template>
  <div class="table">
    <div class="head">
      <div class="first">按钮名称</div>
      <div>
        <el-checkbox v-model="display" @change="handleAll" true-label="true" false-label="false" /><span
          class="padding2"
          >显/隐</span
        >
      </div>
      <div class="last wid1">必填字段</div>
    </div>
    <div class="row" v-for="item in datas" :key="item.id">
      <div class="first">{{ item.buttonName }}</div>
      <div>
        <el-checkbox v-model="item.display" @change="handleOne" true-label="true" false-label="false" /><span
          class="font1 padding2"
          >显/隐</span
        >
      </div>
      <div class="last wid1">
        <el-select v-model="item.required" multiple style="width: 100%" placeholder="请选择">
          <el-option v-for="item in options" :key="item.prop" :label="item.fieldName" :value="item.fieldProp">
          </el-option>
        </el-select>
      </div>
    </div>
  </div>
</template>

<script>
import _ from 'lodash'
export default {
  props: {
    datas: {
      type: Array,
      default: () => []
    },
    item: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      display: null,
      options: null,
      isAll: 0
    }
  },
  watch: {
    item: {
      handler(val) {
        if (val?.properties?.buttonList) {
          let btnsSelected = 0
          let maxLen = val.properties.buttonList.length
          val.properties.buttonList.map((button) => {
            const { required, requiredField, display } = button

            if (required.length !== JSON.parse(requiredField || '[]').length) {
              button.requiredField = JSON.stringify(required)
            }

            if (display === 'true') {
              btnsSelected += 1
            }
          })

          const newDisplay = btnsSelected === maxLen ? 'true' : 'false'
          if (newDisplay !== this.display) {
            this.display = newDisplay
          }
        }
      },
      deep: true
    },
    display(val) {
      if (this.datas.length && this.isAll) {
        this.datas.map((item) => {
          item.display = val
        })
      }
    },
    datas: {
      handler(val) {
        this.$emit('on-list', val)
      },
      deep: true
    }
  },
  mounted() {
    if (this.item?.properties?.fromPropertyList) {
      this.options = _.filter(this.item.properties.fromPropertyList, { operating: 'writable' })
    }
  },
  methods: {
    handleAll() {
      this.isAll = 1
    },
    handleOne() {
      this.isAll = 0
    }
  }
}
</script>

<style lang="scss" scoped>
@import './form.scss';
.table {
  padding: 20px;
}
</style>
